<template>
	<view class="theater">
		<navbar title="剧场" />

		<view class="theater-scrall-bar" :style="{ top: systemInfo.navBarHeight + systemInfo.statusBarHeight + 5 + 'px' }">
			<ScrollTabbar :tabs="tabs" :currentTabIndex="currentTabIndex" @tabClick="handleTabClick" />
		</view>

		<swiper
			class="swiper"
			:style="{ paddingTop: systemInfo.navBarHeight + 'px' }"
			:current="currentTabIndex"
			:indicator-dots="false"
			:autoplay="false"
			:duration="500"
			@change="handleChange"
		>
			<template v-for="(item, index) in tabs" :key="index">
				<swiper-item>
					<!-- 第一页数据：big list是正常数据，group-list是精选数据 -->
					<view class="swiper-item" v-if="index == 0">
						<view class="list-wrapper">
							<view class="group-list">
								<template v-for="(item, index) in theaterOtherData" :key="index">
									<GroupCard :group-data="item" />
								</template>
							</view>

							<view class="big-list">
								<template v-for="(item, index) in theaterData.list" :key="index">
									<BigCard :card-detail="item" />
								</template>
							</view>
						</view>
					</view>

					<!-- 其他页正常数据 -->
					<view class="swiper-item" v-else>
						<view class="list-wrapper">
							<view class="big-list">
								<template v-for="(item, index) in theaterData.list" :key="index">
									<BigCard :card-detail="item" />
								</template>
							</view>
						</view>
					</view>
				</swiper-item>
			</template>
		</swiper>
	</view>
</template>

<script setup>
	import GroupCard from './components/theater-group-card/theater-group-card.vue';
	import BigCard from '@/components/big-card/big-card.vue';
	import ScrollTabbar from '@/components/scroll-tabbar/scroll-tabbar.vue';
	import useTheaterStore from '@/stores/theater/theater.js';
	import { storeToRefs } from 'pinia';
	import { reactive, ref } from 'vue';
	import useCommonStore from '@/stores/common/common';

	// - stores
	const commonStore = useCommonStore();
	const theaterStore = useTheaterStore();
	const { systemInfo } = storeToRefs(commonStore);
	const { theaterData, theaterOtherData, tabs } = storeToRefs(theaterStore);

	// - data
	const pagData = reactive({
		page: 1,
		pagesize: 10
	});
	const currentTabIndex = ref(0);

	// - methods
	const handleTabClick = (payload) => {
		currentTabIndex.value = payload.currentTabIndex;
	};
	// 监听滑动页改变
	const handleChange = (e) => {
		currentTabIndex.value = e.detail.current;

		theaterStore.fetchTheaterDataAction(tabs.value[currentTabIndex.value].id, { ...pagData });
	};

	function setupInit() {
		theaterStore.fetchTheaterOtherDataAction();

		// 初始化请求第一页的数据，需要等待所有标签数据请求完成
		Promise.all([theaterStore.fetchAllLabels()]).then(() => {
			theaterStore.fetchTheaterDataAction(tabs.value[0].id, { ...pagData });
		});
	}
	setupInit();
</script>

<style lang="scss">
	.theater {
		position: relative;
		overflow: hidden;
		background: linear-gradient(to bottom, #ffe4e1, #ffffff);
		box-sizing: border-box;
		height: 100%;

		.theater-scrall-bar {
			position: fixed;
			top: 0;
			left: 0;
		}

		.swiper {
			height: 100%;
			box-sizing: border-box;

			.swiper-item {
				height: 100%;
				padding: 0 30rpx;

				.list-wrapper {
					height: 100%;
					overflow-y: auto;
					box-sizing: border-box;
					padding-bottom: 78px;
				}
			}
		}
	}
</style>
